<template>
    <el-main>
        <div class="header">浏览记录</div>
        <div class="conn">
            <div class="top">
                <div class="search">
                    <el-input
                        class="searchInput"
                        size="large"
                        :prefix-icon="Search"
                        v-model="keyword"
                        @blur="searchkey"
                        @keyup.enter="searchkey"
                    />
                    <el-button size="large" @click="searchkey">搜索</el-button>
                </div>
                <div
                    class="del"
                    v-show="isshow"
                    @click="alldel"
                    v-if="historyData?.length"
                >
                    批量删除
                </div>
                <div class="opera" v-show="!isshow">
                    <span
                        style="margin-left: 18px; cursor: pointer"
                        @click="isshow = true"
                        >取消</span
                    >
                    <span
                        style="margin: 0 20px 0 18px; cursor: pointer"
                        @click="delList"
                        >确定{{
                            selList.length ? `(${selList.length})` : ""
                        }}</span
                    >
                    <span
                        v-show="concel"
                        style="margin-left: 18px; cursor: pointer"
                        @click="allchangge"
                        >全选</span
                    >
                    <span
                        v-show="!concel"
                        style="margin-left: 18px; cursor: pointer"
                        @click="cancelall"
                        >取消全选</span
                    >
                </div>
            </div>

            <DanceVideo
                v-for="data in historyData"
                v-if="historyData?.length"
                :data="data"
                v-model:isshow="isshow"
                :key="data.id"
                :dataid="data.id"
                @pusharr="pusharr"
                v-model:ischecked="ischecked"
                @delone="delone"
            ></DanceVideo>

            <el-empty
                v-else
                description="无更多数据"
                :image-size="225"
                image="	https://rs.dance365.com/img/no_content@3x.0fd78ad2.png"
            >
            </el-empty>
            <el-pagination
                style="margin-top: 10px"
                small
                layout="->,prev, pager, next"
                :total="total"
            />
        </div>
    </el-main>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import trainingCenterApi, { type historyList } from "@/api/training";
import { Search } from "@element-plus/icons-vue";
import DanceVideo from "./components/dancVideo.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const token = ref("3f944e75-31cb-4972-b684-58e70fe09f8f");
const pageSize = ref(10);
const historyData = ref<historyList[]>();
//原数据
const resourceData = ref<historyList[]>();
const total = ref(0);
const isshow = ref(true);
const concel = ref(true);
const ischecked = ref(false);
const keyword = ref();
let selList = ref<string[]>([]);

const searchkey = () => {
    if (!keyword.value) {
        getData();
    } else {
        historyData.value = resourceData.value?.filter((item) =>
            item.momentTitle.includes(keyword.value)
        );
    }
};

const alldel = () => {
    isshow.value = false;
};
const allchangge = () => {
    concel.value = false;
    ischecked.value = true;
    historyData.value?.map((item) => {
        selList.value.push(item.id);
    });
};
const cancelall = () => {
    concel.value = true;
    ischecked.value = false;
    selList.value = [];
};

const delone = (val: string) => {
    historyData.value = historyData.value?.filter((item) => !(item.id == val));
};

const delList = () => {
    ElMessageBox.confirm("此操作将删除选项, 是否继续?", "Warning", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            ElMessage({
                type: "success",
                message: "删除成功",
            });
            if (selList.value.length == historyData.value?.length) {
                historyData.value = [];
                selList.value = [];
                isshow.value = true;
            } else {
                historyData.value = historyData.value?.filter(
                    (item) => !selList.value.find((it) => it == item.id)
                );
                isshow.value = false;
                selList.value = [];
            }
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消删除",
            });
        });
};
const pusharr = (val: string) => {
    if (selList.value.find((item) => item == val)) {
        let rsult = selList.value.indexOf(val);
        selList.value.splice(rsult, 1);
    } else {
        selList.value?.push(val);
    }
};
const getData = async () => {
    try {
        let result = await trainingCenterApi.getHistoryData();

        historyData.value = result.data.content;
        resourceData.value = result.data.content;
        total.value = result.data.totalPages;
    } catch (error) {
        console.log(error);
    }
};
onMounted(() => {
    getData();
});
</script>

<style lang="less" scoped>
.el-main {
    padding: 0;
    overflow-x: hidden;
    .header {
        background-color: #fff;
        margin-bottom: 10px;
        color: #111;
        font-size: 14px;
        padding: 28px 30px;
    }
}
.conn {
    width: 960px;
    min-height: 720px;
    padding: 10px 30px;
    margin-bottom: 20px;
    background-color: #fff;
    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search {
            .searchInput {
                width: 270px;
                height: 40px;
                padding-right: 15px;
            }
            :deep(.el-input__wrapper) {
                background: #f5f7f9;
            }
            .el-button {
                background-color: #f5f7f9;
            }
        }
        .del {
            color: #111;
            font-size: 14px;
            cursor: pointer;
        }
        .opera {
            font-size: 14px;
            color: #f93684 !important;
        }
    }
}
.el-empty {
    height: 644px;
    padding: 0;
}
</style>
